{% extends 'app/base.html' %}

{% block content %}
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Rating</th>
        <th scope="col">Views</th>
        <th scope="col">Thumbnail</th>
        <th scope="col">Video</th>
      </tr>
    </thead>
    <tbody>
      {% for video in videos %}
      <tr>
        <td>{{ video['title'] }}</td>
        <td>{{ '%0.2f' % video['rating']|float }}</td>
        <td>{{ video['views'] }}</td>
        <td><img src="{{ video['thumbnail'] }}" width="420" height="315" alt="Video Thumbnail" class="img-thumbnail"></td>
        <td>
            <iframe width="420" height="315"src="https://www.youtube.com/embed/{{ video['youTubeId'] }}">
            </iframe>
        </td>
      </tr>

      {% endfor %}
    </tbody>
  </table>
{% endblock content %}